<template>
<div id="skill-page-learn">
  <SkillPageDetail>
    <template v-slot:title>
      <h1>学习区</h1>
    </template>
    <template v-slot:main>
      <ContainerBox type="common" class="chapters" id="chapter-list">
        <div class="chapter" v-for="(chapter,index) in chapterDoList">
          <div class="title" @click="getSectionPage(chapter.id, index)">
            {{chapter.title}}
            <div class="arrow"><i :class="show[index]?'el-icon-arrow-up':'el-icon-arrow-down'"></i></div>
          </div>
          <div class="sections" v-if="show[index]">
            <div class="section" v-for="(section,index1) in sectionDoList[index]">
              <div class="title" @click="getLearnResource(section.id, section, chapter, index)">
                {{index1+1}}、{{section.title}}
              </div>
            </div>
          </div>
        </div>
      </ContainerBox>
    </template>
  </SkillPageDetail>
</div>
</template>

<script>
import SkillPageDetail from '../skill_page_detail'
import ContainerBox from '../../../box/container_box'
export default {
  name: "skill_page_learn",
  components:{SkillPageDetail,ContainerBox},
  data() {
    return {
      show: [],
      chapterDoList: [],
      sectionDoList: [],
    }
  },
  mounted() {
    this.getChapterPage();
  },
  computed: {

  },
  methods: {
    // 获取章
    getChapterPage: function () {
      const self = this;
      var id = this.$route.params.id;
      this.$axios({
        method: 'get',
        url: '/skill/chapter/listChapterVOBySkillId/' + id
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        self.chapterDoList = jsonObj.data.rows;
        console.log("chapterDoList",jsonObj);
      })
    },
    // 获取节内容，采用懒加载
    getSectionPage: function (chapterId, chapterIndex) {
      const self = this;
      // 如果已经加载过数据了，则控制显示
      if (self.sectionDoList[chapterIndex]) {
        self.$set(self.show,chapterIndex,!self.show[chapterIndex]);
      } else {
        // 否则先加载数据并显示
        self.$axios({
          method: 'get',
          url: '/skill/section/listSectionVOByChapterId/' + chapterId
        }).then(function (response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          self.$set(self.sectionDoList,chapterIndex,jsonObj.data.rows);
          self.$set(self.show,chapterIndex,true);
          console.log("sectionDoList",self.sectionDoList);
        })
      }

    },
    // 跳转至该节对应的笔记区
    getNoteContent: function (sectionId) {
      this.$router.push("/skillPage/"+this.$route.params.id+"/note/detail/" + sectionId);
    },
    getQuestions: function (sectionId) {
      this.$router.push("/skillPage/"+this.$route.params.id+"/questions/list?sectionId=" + sectionId);
    },
    // 完成学习
    completeLearn: function (sectionId, section, chapter, index) {
      section.status = 2;
      const self = this;
      this.$axios({
        method: 'get',
        url: '/skill/section/endLearn/' + sectionId
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log(jsonObj);
        if(jsonObj.success) {
          console.log(section);
          self.$message({
            type: 'success',
            message: '恭喜完成学习'
          });
        }
      })
    },
    getLearnResource: function (sectionId, section, chapter, index) {
      const self = this;
      if (section.status === 2) {
        self.$message({
          type: 'success',
          message: '已经完成学习，好好复习吧'
        });
      } else if(section.status === 1) {
        self.$message({
          type: 'success',
          message: '继续学习'
        });
      } else {
        section.status = 1;
        this.$axios({
          method: 'get',
          url: '/skill/section/startLearn/' + sectionId
        }).then(function (response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          self.$message({
            type: 'success',
            message: '开始学习，跳转资源页，生成笔记'
          });
          // 跳转到对应的资源页
        })
      }
      setTimeout(()=> {
        //this.$router.push('/skillLearn/'+sectionId);
        window.open('/skillLearn/'+self.$route.params.id + '/' +sectionId, "_blank");
      }, 1000);

    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../../.././assets/style/common";
#skill-page-learn {
  .chapters {
    min-height: 500px;
    .chapter {
      box-sizing: border-box;
      padding: 10px;
      border-radius: 10px;
      background-color: white;
      margin: 10px 0;
      transition: 0.3s;
      &:hover {
        box-shadow: 2px 1px 10px 0 #92d3f3;
        transition: 0.3s;
      }
      .title {
        position: relative;
        font-size: 130%;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        @include fontGradual(#157099);
        .arrow {
          top: 5px;
          right: 20px;
          display: block;
          position: absolute;
          font-size: 20px;
        }
        /*&:hover {*/
        /*  .arrow {*/
        /*    display: block;*/
        /*  }*/
        /*}*/
      }
      .sections {
        .section {
          box-sizing: border-box;
          padding: 6px;
          border-radius: 5px;
          //display: flex;
          //align-items: center;
          background-color: white;
          margin: 10px 0 10px 10px;
          transition: 0.3s;
          .title {
            font-size: 100%;
            font-weight: normal;
            width: 100%;
            @include content_over();
          }
          &:hover {
            transition: 0.3s;
            background-color: #ececec;
            cursor:pointer;
          }
          .options {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            div{
              //@include btn_detail();
              width: 50px;
              margin-right: 5px;
              &:last-child {
                width: 90px;
                @include btn_add();
              }
            }
          }
        }

      }
    }
  }


}
</style>
